<template>
  <div id="mainEnterprisehistogram"></div>
</template>
<script setup>
import * as echarts from "echarts";
import resize from "../../../../mixin/resize.js";
import { getCurrentInstance } from "vue";
let myChart = shallowRef();
let num = 10;
let y = ref([]);
let x = ref([]);
let props = defineProps(["enterpriseData"]);
onMounted(() => {
  myChart.value = echarts.init(
    document.getElementById("mainEnterprisehistogram")
  );
  resize(myChart.value);

  getServerData();
});

let getServerData = () => {
  myChart.value.setOption({
    color: ["#0874FA"],
    // tooltip: {
    //   trigger: "axis",
    //   axisPointer: {
    //     type: "shadow",
    //   },
    //   formatter: function (params) {
    //     var relVal = params[0].name + "<br/>";
    //     relVal +=
    //       params[0].seriesName + ":" + Math.abs(params[0].value) + "元" + "<br/>";
    //     // relVal +=
    //     //   params[1].seriesName + ":" + Math.abs(params[1].value) + "元" + "<br/>";
    //     // relVal +=
    //     //   params[2].seriesName + ":" + Math.abs(params[2].value) + "元" + "<br/>";
    //     return relVal; //负数取绝对值变正数
    //   },
    // },
    grid: {
      top: "14%",
      bottom: "18%",
      left: "24%",
      right: "10%",
    },
    toolbox: {
      right: "5%",
      itemSize: 18,
      feature: {
        dataView: {
          show: true, // 是否显示工具
          title: "数据视图",
        },
        magicType: {
          title: "图表类型切换",
          type: ["line", "bar"], //图表类型切换
        },
        icon: "circle",
        saveAsImage: {
          show: true,
          title: "保持图片",
        },
      },
    },
    // legend: {
    //   data: [],
    //   right: "110%", //组件离容器左侧的距离，可以是left,center,right，也可以是像素px和百分比10%
    //   bottom: "110px",
    // },
    // dataZoom: [
    //   {
    //     type: "inside", //无滑动条内置缩放   type: 'slider', //缩放滑动条
    //     filterMode: "filter",
    //     xAxisIndex: [0], //X轴滑动
    //     start: 1,
    //     end: 100,
    //   },
    // ],
    xAxis: {
      name: "(吨)",
      nameTextStyle: {
        color: "#666",
        fontSize: 17,
        padding: [20, 0, 0, 10],
      },
      type: "value",
      axisTick: {
        show: false, //是否显示刻度线
      },
      splitLine: {
        show: false,
      },
      axisLabel: {
        color: "#666",
        fontSize: 18,
      },
      axisLine: {
        show: true, // 是否显示坐标轴轴线
        lineStyle: {
          color: "#ccc", // 坐标轴线线的颜色
          width: "2", // 坐标轴线线宽
          type: "solid", // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
        },
      },
    },

    yAxis: [
      {
        name: "(吨)",
        nameTextStyle: {
          color: "#666",
          fontSize: 18,
          padding: [120, 30, -1, -50],
        },
        show: true,
        // triggerEvent: true,
        data: y.value,
        // nameGap: 115, // 坐标轴名称与轴线之间的距离
        axisTick: {
          show: false, //是否显示刻度线
        },
        axisLabel: {
          color: "#666",
          fontSize: 18,
          // padding: [0, 10, 10, -50],
        },
        axisLine: {
          // show: true, // 是否显示坐标轴轴线
          // symbol: ['none', 'arrow'],     // 轴线两端箭头，两个值，none表示没有箭头，arrow表示有箭头
          // symbolSize: [10, 15],     // 轴线两端箭头大小，数值一表示宽度，数值二表示高度
          lineStyle: {
            color: "#ccc", // 坐标轴线线的颜色
            width: "2", // 坐标轴线线宽
            type: "solid", // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
          },
        },
      },
    ],
    series: [
      {
        label: {
          show: true,
          position: "right",
          formatter: "{insideTopRight|}{Right|{@[0]}吨}",

          rich: {
            Right: {
              color: "#0874FA",
              //width: 0,
              fontSize: "18", // 3
              verticalAlign: "middle",
            },
            insideTopRight: {
              color: "black",
              align: "right",
              width: 0,
              verticalAlign: "bottom",
              lineHeight: 52,
              fontSize: "18",
            },
          },
        },
        type: "bar",
        name: "收入金额",

        // yAxisIndex: 0,
        data: x.value,
      },
    ],
  });
};
watch(
  () => props.enterpriseData,
  () => {
    y.value = props.enterpriseData.map((item) => {
      return item.enterpriseName;
    });
    x.value = props.enterpriseData.map((item) => {
      return item.wasteNum;
    });
    getServerData();
  },
  { deep: true }
);
</script>
<style lang="scss" scoped>
#mainEnterprisehistogram {
  width: 100%;
  margin-top: 2vh;
  height: calc(36vh - 32px);
}
</style>
